<template>
  <div :class="className">
    <el-table
        :ref="'TableStyelA' + Tid"
        :data="TData"
        :height="height"
        :max-height="maxHeight"
        :row-class-name="handleTableRowClassName"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSortChange"
        @filter-change="handleFilterChange"
        @cell-mouse-enter="handleMouseEnter"
        @cell-mouse-leave="handleMouseLeave"
    >
      <template slot="empty">
        <div class="emptyData">
          <p class="blue" v-html="emptyTxt"></p>
        </div>
      </template>
      <el-table-column
          v-if="selectItem"
          :selectable="disableSelect"
          align="center"
          min-width="50"
          type="selection">
      </el-table-column>
      <template v-for="(item,index) in THeader">
        <el-table-column
            v-if="item.prop === 'serial'"
            :key="'TableStyelA' + index"
            label="序号"
            align="center"
            width="100">
          <template slot-scope="scope">
            <div class="date"> {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column
            v-else
            :key="'TableStyelA' + index + globalKey"
            :prop="item.prop"
            :show-overflow-tooltip="item.showOverflowTooltip || false"
            :sortable="item.sortable && 'custom'"
            :sort-method="item.sortMethod"
            :align="item.align"
            :column-key="item.prop"
            :filters="item.filters"
            :fixed="item.fixed"
            :show-tooltip-when-overflow="true"
            :filter-multiple="item.filterMultiple"
            :min-width="item.width || 'auto'"
            :filter-placement="item.filterPlacement || 'bottom'"
            :label="item.label">
          <!--  筛选  -->
          <template v-if="item.filters" #header>
            <div slot="reference" class="filters">
              <span class="search-title">{{ item.label }}</span>
              <span class="iconfont icon-filter"></span>
            </div>
          </template>
          <!--  备注  -->
          <template v-else-if="item.remarks" #header>
            <div class="filterBox">
              <p>{{ item.label }}</p>
              <el-tooltip class="item" effect="dark" :content="item.remarks" placement="top">
                <i class="iconfont icon-failure-empty"></i>
              </el-tooltip>
            </div>
          </template>
          <!--  内容  -->
          <template slot-scope="scope">
            <div v-if="item.event" @click.stop="$emit(item.event,scope.row)"
                 class="underline"
                 v-html="scope.row[item.prop]"
            >{{ scope.row[item.prop] }}
            </div>
            <div v-else-if="item.className === 'reply'" :class="scope.row.lastReplyTime !== null ? 'reply' : ''">
              <span style="display: inline-block;vertical-align: middle;color:#333;">
                <i v-if="scope.row.lastReplyTime !== null" class="icomoon-duihao"
                   style="margin-right: 8px;display: inline-block;vertical-align: middle"></i>
                {{ scope.row[item.prop] }}
              </span>
            </div>
            <div v-else-if="item.prop === 'operation'" class="operationCase">
              <template v-for="(in_item,in_index) in scope.row[item.prop]">
                <span
                    :key="'operation' + in_index"
                    class="handle"
                    :class="in_item.disable ? 'disable' : ''"
                    @click.stop="handleOperation(in_item,scope)"
                >
                  {{ in_item.name }}
                </span>
              </template>
            </div>
            <div v-else-if="numberChange.includes(item.prop)" class="trim" @click.stop="()=>{}">
              <el-input
                  v-model="scope.row[item.prop]"
                  min="1"
                  placeholder="请输入内容"
                  type="number"
                  @change="$emit('changeNumber',scope,item.prop)"
                  @input="scope.row[item.prop]=scope.row[item.prop].replace(/^(0+)|[^\d]+/g,'')"
              />
            </div>
            <div v-else
                 :class="scope.row['className']&&scope.row['className']['prop']===item.prop?scope.row['className']['class']:item.className"
                 class="txtline" v-html="scope.row[item.prop]">
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <pager
        v-if="pagination"
        :pagination="pagination"
        @currentChange="handleCurrentChange"
        @sizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import pager from "@/components/TableStyel/pager";

export default {
  name: "TableStyelA",
  data() {
    return {
      multipleSelection: [], // 选中内容
      randId: 0,
      globalKey: 0
    }
  },
  components: {
    pager
  },
  props: {
    THeader: {
      type: Array,
      default() {
        return [];
      }
    }, // 表头
    height: {
      type: [Number, Boolean, String],
      default() {
        return 'auto'
      }
    }, // 表格高度
    maxHeight: {
      type: [Number, Boolean, String],
      default() {
        return null
      }
    }, // 表格高度
    TData: {
      type: Array,
      default() {
        return [];
      }
    }, // 数据
    selectItem: {
      type: Boolean,
      default() {
        return true;
      }
    }, // 是否可选
    pagination: {
      type: [Boolean, Object],
      default() {
        return false;
      }
    },
    emptyTxt: {
      type: String,
      default() {
        return "暂时没有数据";
      }
    },
    className: {
      type: String,
      default() {
        return '';
      }
    }, // class
    Tid: {
      type: [String, Number],
      default() {
        return '';
      }
    },
    automatic: {
      type: Boolean,
      default() {
        return false;
      }
    }, // 自动滚动到底部
    rowActiveKey: {
      type: [String, Number],
      default() {
        return '';
      }
    }, // 自动滚动到底部
    disableSelect: {
      type: Function,
      default() {
        return () => {
          return true
        }
      }
    }, // 当前行是否可以选中
    numberChange: {
      type: Array,
      default() {
        return [];
      }
    }, // input输入的prop名称
  },
  watch: {
    TData() {
      if (this.automatic) {
        this.$nextTick(() => {
          this.$refs['TableStyelA' + this.Tid].bodyWrapper.scrollTop = 74 * this.TData.length
        })
      }
    },
    rowActiveKey(val) {
      this.$refs['TableStyelA' + this.Tid].bodyWrapper.scrollTop = 74 * val
    },
    'THeader': {
      handler() {
        this.globalKey = Math.random().toString(36).substr(-10)
      },
      deep: true
    }
  },
  methods: {
    // 操作返回事件
    handleOperation(in_item, scope) {
      if (!in_item.disable) {
        this.$emit(in_item.event, scope.row,scope.$index)
      }
    },
    // 行class
    handleTableRowClassName({row, rowIndex}) {
      if (row.className) {
        return row.className
      }
      if (rowIndex % 2 !== 0) {
        return 'warning-row';
      }
    },
    // 表格选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit('selection', this.multipleSelection)
    },
    // 行点击
    handleRowClick(e, expanded) {
      this.$refs['TableStyelA' + this.Tid].toggleRowSelection(e, expanded)
    },
    // 当前页码
    handleSizeChange(val) {
      this.$emit('sizeChange', val)
    },
    // 当前页大小
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    },
    // 排序事件
    handleSortChange(column, prop, order) {
      this.$emit('sortChange', column, prop, order)
    },
    // 筛选修改
    handleFilterChange(filters) {
      this.$emit('filterChange', filters)
    },
    // 鼠标进入-单元格
    handleMouseEnter(row, column, cell, event) {
      this.$emit('mouseEnter', row, column, cell, event)
    },
    // 鼠标移出-单元格
    handleMouseLeave(row, column, cell, event) {
      this.$emit('mouseLeave', row, column, cell, event)
    }
  }
}
</script>

<style scoped lang="scss">
.filterBox{
  p,i{
    display: inline-block;
    vertical-align: middle;
  }
}
.iconfont{
  cursor:pointer;
}
.operationCase{
  span{
    cursor:pointer;
  }
}
</style>
